/*
 * @Author: scopesang
 * @Date: 2022-05-12 13:30:30
 * @LastEditors: scopesang
 * @LastEditTime: 2022-05-13 14:02:40
 * @FilePath: \hook-ts\src\example\memo.tsx
 * @Description: memo memory
 * 
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
 */
import React, { useState, memo } from 'react'

// memory  记忆缓存组件 如果上一次和本次没有区别就不会更新   shoulComponentUpdate
const Sub = memo(() => {
    console.log('The child component is fired');

    return (
        <>Subcomponent CONTENT</>
    )
})

export default function Memo() {
    const [num, setNum] = useState(0)
    // setNum 會更新頁面上的dom 元素   浪费资源
    const handleClick = () => {
        setNum(num + 1)
    }
    return (
        <div>
            <div>{num}</div>
            <button onClick={handleClick}></button>
            <Sub></Sub>
        </div>
    )
}
